<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>白嫖电影</title>

    <!-- === CSS === -->
    <link rel="stylesheet" href="bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/ionicons.css">
    <link rel="stylesheet" href="css/app.css">
    <!--使用CDN方式引入jQuery类库-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <style>
        .navbar-form {
            position: relative;
            margin-top: 60px;
            width: 100%;

        }

        .movie-search-items {
            color: #fdfdfd;
            border: 1px solid #ffffff;
            border-radius: 12px;
        }

        #particle-container {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #particle-container canvas {
            display: block;
            background: #17181A;
        }

        dl dd, dl dt {
            padding: 10px 20px;
        }

        dl dt {
            text-decoration: underline;
        }

        dl dd {
            color: #dadada;
            text-indent: 2em;
            #background-color: lightgrey;
        }

        .movie-login-form, .movie-reg-form {
            width: 60%;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #999999;
            border-radius: 12px;
            color: #fdfdfd;
        }

        .movie-login-form form {
            width: 70%;
            height: 390px;
            position: relative;
            top: 20px;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            outline: 2px solid lightpink;
        }

        .movie-reg-form form {
            width: 70%;
            height: 390px;
            position: relative;
            top: 12px;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            outline: 2px solid lightpink;
        }

        .movie-login-form form .form-group input {
            height: 20px;
            color: #fefefe;
            border-color: #99CCCC;
        }

        .movie-reg-form form .form-group input {
            height: 20px;
            color: #fefefe;
            border-color: #99CCCC;
        }

        .movie-login-form form .form-group label {
            font-size: large;
            color: #fefefe;
        }

        .movie-reg-form form .form-group label {
            font-size: large;
            color: #fefefe;
        }

        .movie-login-form #rememberme {
            pointer-events: auto;
            box-sizing: unset;
        }

        .materialize-toast {
            position: relative;
            left: -400px;
            /*position: absolute;*/
            width: 480px;
            height: 60px;
            margin: 0px auto;
        }
    </style>
</head>
<body>

<!--=== 电影网站的导航栏开始 ===-->
<header class="header" style="background: #17181A;width: 100%; height: 62px;">
    <iframe id="movie-nav-bar" src="movie-header-nologin.html" style="width:100%; height: 62px;" wmode="transparent" frameborder="0" allowfullscreen></iframe>
</header>
<!--=== 电影网站的导航栏结束===-->



<section class="movies movie-5" style="padding-top: 80px">
    <!--下面就是登录背景颗粒化的DIV-->
    <div id="particle-container"></div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="wrap-movie pt-2">
                    <div class="section-title-wrap">
                        <div class="section-title"></div>
                    </div>
                    <ul class="tabs movies-tabs-1">
                        <li class="tab"><a class="active" style="color: #fefefe" href="#login">登录</a></li>
                        <li class="tab"><a href="#reg" style="color: #fefefe">注册</a></li>
                    </ul>
                    <div id="login" class="">
                        <div>
                            <div class="movie-login-form">
                                <form id="loginForm">
                                    <div class="form-group">
                                        <label for="identify">用户名</label>
                                        <input type="text" class="form-control" placeholder="请输入注册手机号码"
                                               id="identify" name="identify" aria-describedby="emailHelp">
                                        <small id="emailHelp" class="form-text text-muted"></small>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">密码</label>
                                        <input type="password" placeholder="请输入密码" name="password"
                                               class="form-control" id="password">
                                    </div>
                                    <div class="form-group">
                                        <img id="randomCodeImg" style="width: 30%;cursor:pointer;"
                                             title="看不清楚，点击换一张" onclick="javascript:initRandomCodeImg();"
                                             src="#">
                                    </div>
                                    <div class="form-group">
                                        <label for="randomCode">验证码</label>
                                        <input type="text" class="form-control" placeholder="请输入验证码"
                                               id="randomCode" aria-describedby="randomCodeHelp">
                                        <small id="randomCodeHelp" class="form-text text-muted"></small>
                                    </div>
                                    <div class="form-group">

                                        <input type="checkbox" style="text-align: right; width:120px; opacity: 1;"
                                               class="form-control" checked  value="" id="rememberme"/>记住我

                                    </div>
                                    <button type="button" style="display: block;width: 100%" onclick="doLogin()"
                                            class="btn btn-primary">登录
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="reg" class="">
                        <div>
                            <div class="movie-reg-form">
                                <form id="movieRegForm">
                                    <div class="form-group">
                                        <label for="mobile">注册手机</label>
                                        <input type="text" class="form-control" id="mobile"
                                               placeholder="请输入注册手机号码" name="mobile"
                                               aria-describedby="mobileHelp">
                                        <small id="mobileHelp" class="form-text text-muted"></small>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn btn-primary"
                                                style="color:#666; background-color: #f6f5f5"
                                                id="sendRandomCodeBtn"
                                                onclick="debounceSendRandomCodeMsg()">发送验证码
                                        </button>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">密码</label>
                                        <input type="password" placeholder="请输入密码" id="regpassword" name="password"
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="confirmpass">确认密码</label>
                                        <input type="password" placeholder="请输入确认密码" name="confirmpass"
                                               class="form-control"
                                               id="confirmpass">
                                    </div>
                                    <div class="form-group">
                                        <label for="validateCode">验证码</label>
                                        <input type="text" class="form-control" id="validateCode"
                                               aria-describedby="validateCodeHelp">
                                        <small id="validateCodeHelp" class="form-text text-muted"></small>
                                    </div>
                                    <button type="button" onclick="doReg()" class="btn btn-primary"
                                            style="background-color: #E82027">
                                        注册
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--=== movies 1 ===-->
<section class="movies movie-1">
    <div class="container">
        <div class="row">
        </div>
    </div>
</section>


<!--=== Modal For All Videos ===-->
<div class="modal popup-video fade" id="call-video" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="close" data-dismiss="modal" aria-label="Close"><i class="ion ion-ios-close-outline"></i>
                </div>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                            allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!--=== footer area ===-->
<section class="footer-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-logo"><img src="images/small-image/moviez-logo.png" alt="footer logo"></div>
                <div class="subscribe">
                    <p>做中国影迷最喜欢的免费电影资源库！<br>我们的口号是：永远白嫖，永不收费！</p>
                </div>

            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>商务合作</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">招商引资</a></li>
                        <li class=""><a href="#">意见投诉</a></li>
                        <li class=""><a href="#">我要求片</a></li>
                        <li class=""><a href="#">版权声明</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>友情链接</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">豆瓣网</a></li>
                        <li class=""><a href="#">中国电影网</a></li>
                        <li class=""><a href="#">1080影视大全</a></li>
                        <li class=""><a href="#">爱奇艺</a></li>
                        <li class=""><a href="#">牛牛编程</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>投资者关系</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">关于我们</a></li>
                        <li class=""><a href="#">公司简介</a></li>
                        <li class=""><a href="#">发展历程</a></li>
                        <li class=""><a href="#">加入我们</a></li>
                        <li class=""><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <hr class="d-md-none d-lg-block">
        </div>


        <hr>
        <div class="row">
            <div class="col-12">
                <div class="footer-wrap text-center">
                    <!--ul class="list-inline social-icon">
                        <li class="list-inline-item"><i class="ion ion-social-twitter"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-linkedin"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-dribbble-outline"></i></li>
                    </ul-->
                    <div class="footer-tag">2018-2023 &copy; 华清远见 | 作者：西蒙牛</div>
                </div>
                <div style="text-align: center;color: #ccc">
                    [<a href="admin/login.html">后台管理</a>]
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ==== js ==== -->
<!--
<script src="js/jquery-2.2.3.min.js"></script>
-->
<script src="js/popper.min.js"></script>
<script src="bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

<!--
<script src="js/materialize.min.js"></script>
-->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/materialize/0.98.2/js/materialize.min.js"></script>
<script src="js/app.js"></script>

<script src="js/util/myutil.js"></script>

<script src="js/util/outils.min.js"></script>
<script src="js/api/baseUrl.js"></script>
<script src="js/api/users.js"></script>
<script src="js/api/commons.js"></script>

<!--以下的登录背景颗粒化的类库-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/particles.js/2.0.0/particles.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/crypto-js/4.1.1/crypto-js.min.js"></script>

<script src="js/index.js"></script>
<script src="js/auth.js"></script>
<script src="js/util/encrypt.js"></script>

<!--
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/1.3.1/lodash.mobile.js"></script>
-->

<script type="module">
    //这个类库用来生成前端的令牌
    //由于它是一个js的模块，必须写在一个带module的javascript脚本里面
    import {nanoid} from "./js/util/nanoid.js";

    let token = '';
    token = nanoid(16); //生成一个长度为16位的令牌
    window.sessionStorage.setItem("client-token", token);
    initRandomCodeImg();
</script>

<script type="module">

    let isLogin = await authLoginStatus().then(resp=>{
        console.log("-------在login.html页面中判断的登录状态-------")
        console.log(resp);
        return resp;
    });

    //如果已经登录，其实整个login.html应该不显示。
    if(isLogin){
        window.location.href='index.html';

    }

    if(isLogin){
        $("#movie-nav-bar").prop("src",'movie-header-islogin.html')
    }else{
        $("#movie-nav-bar").prop("src",'movie-header-nologin.html')
    }
</script>

<script>
    //window.onload = initRandomCodeImg();
    //let sendRandomCodeBtnEnabled = true; //发送验证码按钮默认可用。

    //初始化咱们的用户名和密码；
    if(outils.getCookie("identify.freemovie.com")!=null){
        let encrptIdentify = outils.getCookie("identify.freemovie.com");
        $("#identify").val( decrypt(encrptIdentify));
    }

    if(outils.getCookie("password.freemovie.com")!=null){
        let encrptPassword = outils.getCookie("password.freemovie.com");
        $("#password").val(decrypt(encrptPassword));
    }

    let debounceTimer = null;

    //初始化验证码图片
    function initRandomCodeImg(){
        //src  img
        let token =  window.sessionStorage.getItem("client-token");
        $("#randomCodeImg").prop("src", "http://192.168.5.23:8080/movie-front/commons/randomcode?tm="+new Date().getTime()+"&token="+token);

    }

    function doLogin() {
        let identify = $("#loginForm #identify").val();
        let password = $("#loginForm #password").val();
        let randomCode = $("#randomCode").val();
        let token =  window.sessionStorage.getItem("client-token");
        console.log("用户名：" + identify + ",密码：" + password);
        login(identify, password,randomCode,token).then(resp => {
            if (resp.code === 200) {

                console.log("-------------当前登录成功的用户信息是------------")
                console.log(resp.data);
                //把会员卡号保存到cookie中。怎么存。
                outils.setCookie("movie-token-name",resp.data.tokenName,100); //默认保存100天
                outils.setCookie("movie-token-value",resp.data.tokenValue,100);
                localStorage.setItem("currentLoginUserInfo",JSON.stringify(resp.data));
                //页面跳转之前，干什么事情。
                //判断用户是否选择了记住我。
                if($("#rememberme").prop("checked")){
                    console.log("用户选择了记住我...")
                    //把用户名和密码进行加密
                    let encrptyIdentify =  encrypt(identify); //加密之后的手机号码
                    let encrptyPassword = encrypt(password); //加密之后密码
                    //console.log("加密之后的手机号码："+encrptyIdentify);
                    //console.log("加密之后的密码："+encrptyPassword);
                    outils.setCookie("identify.freemovie.com",encrptyIdentify,100);
                    outils.setCookie("password.freemovie.com",encrptyPassword,100);

                }else{
                    //console.log("用户选择了忘记我...")
                    outils.removeCookie("identify.freemovie.com");
                    outils.removeCookie("password.freemovie.com");
                }

                setTimeout('window.location.href = "index.html"',1000);
            } else {
                Materialize.toast(resp.msg, 4000, 'materialize-toast')
            }
        })
    }

    //使用防抖函数发送验证码
    async function debounceSendRandomCodeMsg() {
        if (debounceTimer) {
            clearTimeout(debounceTimer)
        }
        debounceTimer = setTimeout(() => {
            sendRandomCodeMsg();
        }, 1000)
    }

    //这个方法必须改造为防抖的，不允许用户短时间的频繁的触发。
    async function sendRandomCodeMsg() {

        let mobile = $("#mobile").val();
        if (!outils.isPhoneNum(mobile)) {
            Materialize.toast('手机格式不正确！', 4000, 'materialize-toast')
            return true;
        }

        let mobileIsReg = await checkMobileIsReg(mobile).then(resp => {
            if (resp.code === 200) {
                return resp.data;
            }
        }); //布尔值
        if (mobileIsReg) {
            //这个手机已经注册了。
            Materialize.toast('该手机号码已经注册！', 4000, 'materialize-toast')
            return true; //后面的 事情的不做了。
        }

        console.log("-----------客户端产生的令牌-----------");
        let token = window.sessionStorage.getItem("client-token");
        console.log(token);
        sendRandomCodeMessage(token, mobile).then(resp => {
            Materialize.toast(resp.msg, 4000, 'materialize-toast')
            if (resp.code === 200) {
                //sendRandomCodeBtnEnabled = false; //这个按钮不能用了。
                $("#sendRandomCodeBtn").attr("disabled", "disabled");
                let iCouter = 60;
                let timer = setInterval(() => {
                    $("#sendRandomCodeBtn").text("发送验证码(" + iCouter + ")");
                    iCouter--;
                    //什么时候iCouter一旦减到了零，定时器必须销毁。
                    if (iCouter <= 0) {
                        clearInterval(timer); //销毁定时器
                        $("#sendRandomCodeBtn").attr("disabled", false);
                        $("#sendRandomCodeBtn").text("发送验证码");
                    }
                }, 1000);
            }
        })
    }

    async function doReg() {
        let regPassword = $("#regpassword").val();
        let confirmPass = $("#confirmpass").val();

        //以下开始表单验证.....
        if (regPassword.length < 6) {
            Materialize.toast('密码不能少于6位！', 4000, 'materialize-toast')
            return;
        }

        if (regPassword != confirmPass) {
            Materialize.toast('密码与确认密码不一致！', 4000, 'materialize-toast')
            return;
        }

        //以下开始检查验证码......
        let yourRandomCode = $("#validateCode").val();
        let token = window.sessionStorage.getItem("client-token");

        //使用了await表示是同步方法。
        let randomCodeIsCorrect = await validateRandomCode(token, yourRandomCode).then(resp => {
            let flag = true;
            if (resp.code === 400) {
                flag = false;
            }
            return flag;
        })
        if (!randomCodeIsCorrect) {
            Materialize.toast('验证码验证不正确！', 4000, 'materialize-toast')
            return;
        }
        let regUser = getFormData("movieRegForm");
        console.log("----------要注册的用户对象是--------")
        console.log(regUser);
        await reg(regUser).then(resp => {
            if (resp.code === 200) {
                Materialize.toast(resp.msg, 4000, 'materialize-toast');
                window.location.reload();
            }
        })
    }
</script>
</body>
</html>
